<%
/*
  Inserts a link to a CSS entity documentation
  Appropriate styling is applied.

  This template handles CSS data types and CSS functions gracefully by
  automatically adding arrow brackets or round brackets, respectively.

  Parameters:
  $0 - API name to refer to
  $1 - name of the link to display (optional)
  $2 - anchor within the article to jump to of the form '#xyz' (optional)

  Examples:
  {{cssxref("background")}} =>
      <a href="/en-US/docs/Web/CSS/background" title="The background CSS
      property is..."><code>background</code></a>
  {{cssxref("length")}} =>
      <a href="/en-US/docs/Web/CSS/length" title="The <length> CSS data type
      denotes..."><code>&lt;length&gt;</code></a>
  {{cssxref("linear-gradient()")}} =>
      <a href="/en-US/docs/Web/CSS/linear-gradient()" title="The CSS
      linear-gradient() function creates..."><code>linear-gradient()</code></a>
  {{cssxref("margin-top", "top margin")}} =>
      <a href="/en-US/docs/Web/CSS/margin-top" title="The margin-top CSS
      property of an element sets..."><code>top margin</code></a>
  {{cssxref("filter", "", "#url")}} =>
      <a href="/en-US/docs/Web/CSS/filter#url()"><code>filter</code></a>
*/

var lang = env.locale;
var url = "";
var urlWithoutAnchor = "";
var str = ($1 || $0);

// Deal with CSS data types by removing <>
var slug = $0.replace(/&lt;(.*)&gt;/g, '$1');

// Special case <color>, <flex>, and <position>
switch ($0) {
    case '&lt;color&gt;':
        slug = 'color_value';
        break;

    case '&lt;flex&gt;':
        slug = 'flex_value';
        break;

    case '&lt;position&gt;':
        slug = 'position_value';
        break;
}

str = str.toLowerCase();
const basePath = `/${lang}/docs/Web/CSS/`;
urlWithoutAnchor = basePath + slug;
url = urlWithoutAnchor + $2;

const thisPage = (!$1 || !$2) ? wiki.getPage(urlWithoutAnchor) : null;

if (!$1) {
    // Append parameter brackets to CSS functions
    if (page.hasTag(thisPage, "CSS Function") && !str.endsWith("()")) {
        str += "()";
    }
    // Enclose CSS data types in arrow brackets
    if (page.hasTag(thisPage, "CSS Data Type") && !/^&lt;.+&gt;$/.test(str)) {
        str = "&lt;" + str + "&gt;";
    }
}

const entry = web.smartLink(url, "", `<code>${str}</code>`, $0, basePath);

%><%- entry %>
